<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example: DataTable - Scrolling (YUI Library)</title>
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
<link type="text/css" rel="stylesheet" href="./css/examples.css">
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
<style type="text/css">
/* customized css for scrolling */
.yui-dt-scrollable  {
    width:30em; /* SET OVERALL WIDTH HERE for ie (make sure columns add up to this total) */
    height:30em; /* SET HEIGHT HERE for ie */
}
.yui-dt-scrollbody {
    height:30em; /* SET HEIGHT HERE for non-ie */
    *height:auto; /* for ie */
}
.yui-dt-scrollable  thead {
    background:#696969; /* for ie */
}

/* SET WIDTHS FOR EACH TH TO HELP ALIGN COLUMNS */
/* IF ALL COLS CAN BE SAME WIDTH USE THIS:
.yui-dt-scrollable th, .yui-dt-scrollbody td {
    width:20em; 
}*/
/* OTHERWISE SET EACH COL WIDTH EXPLICITLY:*/
.yui-dt-scrollable .col1 {
    width:10em; /* this column was assigned "col1" as "className" */
}
.yui-dt-scrollable .col2 {
    width:20em; /* this column was assigned "col2" as "className" */
}

/* custom css*/
#scroll {margin:1em;margin-bottom:3em;}
#scroll table {border-collapse:collapse;}
#scroll th, #scroll td {border:1px solid #000;}
#scroll th {background-color:#696969;color:#fff;}/*dark gray*/
#scroll .yui-dt-odd {background-color:#eee;} /*light gray*/
</style>
</head>
<body>
<div id="hd">
    <h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Scrolling</h1>
</div>
<div id="bd">
    <div id="scroll"></div>

    <!-- Sample code begins -->
    <div id="code">
        <h3>Sample Code</h3>

        <p>Data:</p>

        <textarea name="code" class="JScript" cols="60" rows="1">
YAHOO.example.Data.areacodes = [
    {areacode: "201", state: "New Jersey"},
    ...,
    {areacode: "989", state: "Michigan"}
];
        </textarea>

        <p>CSS:</p>
        
        <p>All of the CSS rules shown below build upon the foundational CSS that
        is provided with DataTable. When a DataTable's <code>scrollable</code>
        property is set to <code>true</code>, the classes <code>yui-dt-scrollable</code>
        and <code>yui-dt-scrollbody</code> are applied to the appropriate
        elements by the DataTable. These classes are defined in the foundational
        CSS, and this example shows how to modify them to get specific
        characteristics with respect to column width, table height, and so on.</p>

        <textarea name="code" class="HTML" cols="60" rows="1">
/* customized css for scrolling */
.yui-dt-scrollable  {
    width:30em; /* SET OVERALL WIDTH HERE for ie (make sure columns add up to this total) */
    height:30em; /* SET HEIGHT HERE for ie */
}
.yui-dt-scrollbody {
    height:30em; /* SET HEIGHT HERE for non-ie */
    *height:auto; /* for ie */
}
.yui-dt-scrollable  thead {
    background:#696969; /* for ie */
}

/* SET WIDTHS FOR EACH TH TO HELP ALIGN COLUMNS */
/* IF ALL COLS CAN BE SAME WIDTH USE THIS:
.yui-dt-scrollable th, .yui-dt-scrollbody td {
    width:20em;
}*/
/* OTHERWISE SET EACH COL WIDTH EXPLICITLY:*/
.yui-dt-scrollable .col1 {
    width:10em; /* this column was assigned "col1" as "className" */
}
.yui-dt-scrollable .col2 {
    width:20em; /* this column was assigned "col2" as "className" */
}

/* custom css*/
#scroll {margin:1em;}
#scroll table {border-collapse:collapse;}
#scroll th, #scroll td {border:1px solid #000;}
#scroll th {background-color:#696969;color:#fff;}/*dark gray*/
#scroll .yui-dt-odd {background-color:#eee;} /*light gray*/
        </textarea>

        <p>Markup:</p>

        <textarea name="code" class="HTML" cols="60" rows="1">
<div id="scroll"></div>
        </textarea>

        <p>JavaScript:</p>
        
        <p>To make a DataTable instance scrollable, set the <code>scrollable</code>
        property to <code>true</code> at instantiation (as in line 13 below).</p>

        <textarea name="code" class="JScript" cols="60" rows="1">
var myColumnHeaders = [
    {key:"areacode",className:"col1"},
    {key:"state",className:"col2"}
];
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: ["areacode","state"]
};

var myDataTable = new YAHOO.widget.DataTable("scroll",myColumnSet,myDataSource,{scrollable:true});
        </textarea>
    </div>
    <!-- Code sample ends -->
</div>

<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
<script type="text/javascript" src="./js/data.js"></script>
<script type="text/javascript">
var myLogger = new YAHOO.widget.LogReader();

/****************************************************************************/
/****************************************************************************/
/****************************************************************************/

var myColumnHeaders = [
    {key:"areacode",className:"col1"},
    {key:"state",className:"col2"}
];
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);

var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
myDataSource.responseSchema = {
    fields: ["areacode","state"]
};

var myDataTable = new YAHOO.widget.DataTable("scroll",myColumnSet,myDataSource,{scrollable:true});
</script>
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</body>
</html>
